<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>照片墙</title>
		<style>
			#box {
				width:80%;
				background-color: black;
				margin:0 auto;
			}	
			#box > img {
				width:200px;
				height:250px;
				margin:30px;
				transform-origin:center;
				transition-duration:2s;
				transition-property:all;
			}
			#box > img:nth-child(1){
				transform:rotate(20deg)
			}
			#box > img:nth-child(1){
				transform:rotate(-20deg)
			}
			#box > img:hover{
				transform:rotate(30deg) scale(1.5);
			}
			
		</style>
	</head>

	<body>
		<!--你好呀，我来学习前端了！-->
		<h1>web学习</h1>
		<h6>web学习</h6>
		<p>人生苦短</p>
		<p>学了python还学前端</p>
		<p>试一试小符号&copy;机械工程出版社</p>
		<p>空&nbsp;格&quot;引号(＾－＾)V！&quot;</p>
		<font color="black",size="7">坚持学习！</font>
		<font color="rgb(184,134,11)" size="7">热爱编程</font>
		<font color="#999999" size="5">很快就学完了</font>
		<a href="https://hao.360.com/?a1004">我爱学习</a>
		<a href="javascript:void(0)" onclick="alert('你敢点我吗？')">弹出框</a>
		<ul type="disc">
			<li>哇哦</li>
			<li>无序列表</li>
		</ul>
		<ol type="circle">
			<li>哦哦</li>
			<li>有序列表</li>
		</ol>
		<div id="box">
			<img src="t01790d273a29124544.jpg">
			<img src="t01f996b12490871cb3.jpg"
		</div>
	</body>
	    
</html>